<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="/css/nav.css">
    <link rel="stylesheet" type="text/css" href="/font/iconfont.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/js/nav.js"></script>
<!--    <script src="/js/jquery.1.8.3.min.js"></script>-->
</head>
<body>
<div th:include="/common/nav :: nav" class="nav" style="float: left;"></div>
<div style="float: left;height: 100%;width: 87.5%;background-color: rgb(235, 243, 243);" >
    <div class="content">


        <div class="demoTable">
            搜索ID：
            <div class="layui-inline">
                <label><input class="layui-input" name="id" id="demoReload" autocomplete="off"  placeholder="输入id"></label>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>

        <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


        <script src="/layui/layui.all.js" charset="utf-8"></script>
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script type="text/javascript" >
            layui.use('table', function(){
                var table = layui.table;


                //方法级渲染
                table.render({
                    elem: '#LAY_table_user'
                    ,url: 'findAllAPackage'
                    ,cols: [
                        [
                            {checkbox: true, fixed: true}
                            // ,{field:'id', title: 'ID', sort: true, fixed: true}
                            ,{field:'no', title: '单号', sort: true, fixed: true}
                            ,{field:'sendName', title: '寄件人'}
                            ,{field:'sendAddress', title: '寄件人地址'}
                            ,{field:'sendPhone', title: '寄件人电话'}
                            ,{field:'receiptName', title: '收件人'}
                            ,{field:'receiptAddress', title: '收件人地址'}
                            ,{field:'receiptPhone', title: '收件人电话'}
                            ,{field:'description', title: '客户留言'}
                            ,{field:'state', title: '状态'}
                            ,{field:'state', title: '操作', align:'center', toolbar:'#barDemo', width:200}
                        ]
                    ]
                    ,id: 'testReload'
                    ,page: true
                    ,height: null
                    ,done: function () {
                        $("[data-field='state']").children().each(function () {
                            if ($(this).text()=='1'){
                                $(this).text("等待揽收")

                            }else if($(this).text()=='2'){
                                $(this).text("运输中")
                            }else if($(this).text()=='3'){
                                $(this).text("派件中")
                            }else if($(this).text()=='-1'){
                                $(this).text("订单取消")
                            }else if($(this).text()=='-2'){
                                $(this).text("取件失败")
                            }else if($(this).text()=='-3'){
                                $(this).text("派送失败")
                            }else if($(this).text()=='0'){
                                $(this).text("派件成功")
                            }
                        });
                    }
                });

                var $ = layui.$, active = {
                    reload: function(){

                        var demoReload = $('#demoReload');

                        //执行重载
                        table.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                key: {
                                    id: demoReload.val()
                                }
                            }

                        }, 'data');
                        layer.msg('单号：'+demoReload.val()+' 的查看操作');

                    }
                };
                //监听工具条
                table.on('tool(user)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'fetchOk'){
                        layer.msg('单号：'+ data.no + ' 的查看操作');
                        layer.confirm('确定揽收吗？', function(index){
                            window.location.href="/courier/fetchPackageOK?packageId="+data.id;
                            layer.msg('单号：'+ data.no + ' 的揽收成功操作完成');
                        });
                    } else if(obj.event === 'fetchNo'){
                        layer.confirm('确定揽收失败吗？', function(index){
                            window.location.href="/courier/fetchPackageNO?packageId="+data.id;
                            layer.msg('单号：'+ data.no + ' 的揽收失败操作完成');
                        });
                    }
                });
                $('.content .demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>

        <script type="text/html" id="barDemo">

            {{#  if(d.state == '1'){ }}
            只能看看
            {{#  }else if(d.state == '2'){  }}
            只能看看
            {{#  }else if(d.state == '-2'){  }}
            只能看看
            {{#  }else if(d.state == '0'){  }}
            只能看看
            {{# }else{ }}
            只能看看
            {{# } }}

            <!--        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
            <!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->

        </script>


    </div>
</div>
</body>
</html>
